<!DOCTYPE html>
<html ng-controller="uiCtrl" ng-app="projectApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="/css/ui-grid.min.css">

    <script src="/js/admin/bundle.min.js"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>tribeca [{{ env }}]</title>
    <link rel="icon" href="icon.png">

    <style>
        .buy { color: blue }
        .sell { color: red }
        .unknown { color: black }

        .black { color: black }
        .red { color: red }

        .row {
            margin-left: 0;
            margin-right: 0
        }

        input[type=number]::-webkit-inner-spin-button,
        input[type=number]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
    </style>
</head>

<script type="text/ng-template" id="market_display.html">
    <table class="table table-hover table-bordered table-condensed table-responsive">
        <tr class="active">
            <th></th>
            <th>bidSz</th>
            <th>bidPx</th>
            <th>FV</th>
            <th>Spread</th>
            <th>askPx</th>
            <th>askSz</th>
        </tr>
        <tr class="info">
            <td>q</td>
            <td ng-class="bidIsLive ? 'text-danger' : 'text-muted'">{{ qBidSz|number:2 }}</td>
            <td ng-class="bidIsLive ? 'text-danger' : 'text-muted'">{{ qBidPx }}</td>
            <td>{{ fairValue }}</td>
            <td>{{ spreadValue }}</td>
            <td ng-class="askIsLive ? 'text-danger' : 'text-muted'">{{ qAskPx }}</td>
            <td ng-class="askIsLive ? 'text-danger' : 'text-muted'">{{ qAskSz|number:2 }}</td>
        </tr>
        <tr class="active" ng-repeat="level in levels">
            <td>mkt{{ $index }}</td>
            <td>{{ level.bidSize|number:2 }}</td>
            <td ng-class="level.bidClass">{{ level.bidPrice }}</td>
            <td></td>
            <td></td>
            <td ng-class="level.askClass">{{ level.askPrice }}</td>
            <td>{{ level.askSize|number:2 }}</td>
        </tr>
    </table>
</script>

<script type="text/ng-template" id="order_form.html">
    <form style="margin: 20px" class="form-horizontal" novalidate role="form">
        <div class="form-group">
            <label>Side</label>
            <select class="form-control input-sm" ng-model="order.side" ng-options="x for x in order.availableSides"></select>
        </div>
        <div class="form-group">
            <label>Price</label>
            <input class="form-control input-sm" type="number" ng-model="order.price" />
        </div>
        <div class="form-group">
            <label>Size</label>
            <input class="form-control input-sm" type="number" ng-model="order.quantity" />
        </div>
        <div class="form-group">
            <label>TIF</label>
            <select class="form-control input-sm" ng-model="order.timeInForce" ng-options="x for x in order.availableTifs"></select>
        </div>
        <div class="form-group">
            <label>Type</label>
            <select class="form-control input-sm" ng-model="order.orderType" ng-options="x for x in order.availableOrderTypes"></select>
        </div>
        <button type="button"
                class="btn btn-success"
                onclick="jQuery('#order_form').popover('hide');"
                ng-click="order.submit()">Submit</button>
    </form>
</script>

<script type="text/ng-template" id="positions.html">
    <div>
        <h4 class="col-md-12 col-xs-2"><small>
            {{ quoteCurrency }}: {{ quotePosition }} ({{ quoteHeldPosition }})
        </small></h4>
        <h4 class="col-md-12 col-xs-2"><small>
            {{ baseCurrency }}: {{ basePosition }} ({{ baseHeldPosition }})
        </small></h4>
        <h4 class="col-md-12 col-xs-2"><small>
          Value: {{ value }} ({{ quoteValue }})
        </small></h4>
    </div>
</script>

<body>

    <div class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">tribeca</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><p class="navbar-text">Target Base Position: <target-base-position></target-base-position></p></li>
                    <li><p class="navbar-text"><trade-safety></trade-safety></p></li>
                    <li>
                        <button type="button"
                                class="btn btn-primary navbar-btn"
                                id="order_form"
                                mypopover popover-template="order_form.html"
                                data-placement="bottom">Submit order
                        </button>
                    </li>
                    <li>
                        <button type="button"
                                class="btn btn-danger navbar-btn"
                                ng-click="cancelAllOrders()"
                                data-placement="bottom">Cancel All Open Orders
                        </button>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div>
            <div style="padding: 5px" ng-class="pair.connected ? 'bg-success img-rounded' : 'bg-danger img-rounded'">
                <div class="row">
                    <div class="col-md-1 col-xs-12 text-center">
                        <div class="row">
                            <button class="col-md-12 col-xs-3" ng-disabled="!pair.active.connected" ng-class="pair.active.getClass()" ng-click="pair.active.submit()">
                                {{ pair_name }}
                            </button>

                            <div ng-if="pair.connectionMessage">
                                <span class="glyphicon glyphicon-alert" aria-hidden="true"></span> {{ pair.connectionMessage }}
                            </div>

                            <h4 style="font-size: 20px" class="col-md-12 col-xs-3">{{ exch_name }}</h4>

                            <position-grid></position-grid>
                        </div>
                    </div>

                    <div class="col-md-3 col-xs-12">
                        <market-quoting-grid></market-quoting-grid>
                        <messages-grid></messages-grid>
                    </div>

                    <div class="col-md-3 col-xs-12">
                        <trade-list></trade-list>
                    </div>

                    <div class="col-md-5 col-xs-12">
                        <market-trade-grid></market-trade-grid>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12 col-xs-12">
                        <div class="row">
                            <table class="table table-responsive table-bordered">
                                <thead>
                                    <tr class="active">
                                        <th>mode</th>
                                        <th>fv</th>
                                        <th>apMode</th>
                                        <th>width</th>
                                        <th>size</th>
                                        <th>tbp</th>
                                        <th>pDiv</th>
                                        <th>ewma?</th>
                                        <th>apr?</th>
                                        <th>trds</th>
                                        <th>/sec</th>
                                        <th colspan="2">
                                            <span ng-if="!pair.quotingParameters.pending && pair.quotingParameters.connected" class="text-success">
                                                Applied
                                            </span>
                                            <span ng-if="pair.quotingParameters.pending && pair.quotingParameters.connected" class="text-warning">
                                                Pending
                                            </span>
                                            <span ng-if="!pair.quotingParameters.connected" class="text-danger">
                                                Not Connected
                                            </span>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="active">
                                        <td>
                                            <select class="form-control input-sm"
                                                ng-model="pair.quotingParameters.display.mode"
                                                ng-options="x.val as x.str for x in pair.quotingParameters.availableQuotingModes"></select>
                                        </td>
                                        <td>
                                            <select class="form-control input-sm"
                                                ng-model="pair.quotingParameters.display.fvModel"
                                                ng-options="x.val as x.str for x in pair.quotingParameters.availableFvModels"></select>
                                        </td>
                                        <td>
                                            <select class="form-control input-sm"
                                                ng-model="pair.quotingParameters.display.autoPositionMode"
                                                ng-options="x.val as x.str for x in pair.quotingParameters.availableAutoPositionModes"></select>
                                        </td>
                                        <td>
                                            <input class="form-control input-sm"
                                                type="number"
                                                onClick="this.select()"
                                                ng-model="pair.quotingParameters.display.width">
                                        </td>
                                        <td>
                                            <input class="form-control input-sm"
                                                type="number"
                                                onClick="this.select()"
                                                ng-model="pair.quotingParameters.display.size">
                                        </td>
                                        <td>
                                            <input class="form-control input-sm"
                                                type="number"
                                                onClick="this.select()"
                                                ng-model="pair.quotingParameters.display.targetBasePosition">
                                        </td>
                                        <td>
                                            <input class="form-control input-sm"
                                                type="number"
                                                onClick="this.select()"
                                                ng-model="pair.quotingParameters.display.positionDivergence">
                                        </td>
                                        <td>
                                            <input type="checkbox"
                                                ng-model="pair.quotingParameters.display.ewmaProtection">
                                        </td>
                                        <td>
                                            <input type="checkbox"
                                                ng-model="pair.quotingParameters.display.aggressivePositionRebalancing">
                                        </td>
                                        <td>
                                            <input class="form-control input-sm"
                                                type="number"
                                                onClick="this.select()"
                                                ng-model="pair.quotingParameters.display.tradesPerMinute">
                                        </td>
                                        <td>
                                            <input class="form-control input-sm"
                                                type="number"
                                                onClick="this.select()"
                                                ng-model="pair.quotingParameters.display.tradeRateSeconds">
                                        </td>
                                        <td>
                                            <input class="btn btn-default btn col-md-1 col-xs-6"
                                                style="width:55px"
                                                type="button"
                                                ng-click="pair.quotingParameters.reset()"
                                                value="Reset" />
                                        </td>
                                        <td>
                                            <input class="btn btn-default btn col-md-1 col-xs-6"
                                                style="width:50px"
                                                type="submit"
                                                ng-click="pair.quotingParameters.submit()"
                                                ng-disabled="!pair.quotingParameters.connected"
                                                value="Save" />
                                        </td>
                                    </tr>
                                </tbody>

                            </table>
                        </div>

                    </div>
                </div>

                <div class="row table-responsive">
                    <div class="col-md-12 col-xs-12">
                        <order-list></order-list>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
